<style rel="stylesheet/scss" lang="scss" scoped>
    .f-cation {
        flex: 1;
        display: flex;
        height: 80%;
        margin: 0 5px;
        padding: 0 5px 0;
        border: 1px solid #e5e5e5;
        flex-direction: column;
        margin-top: 10px;
        min-width: 250px;
        .f-cation_btn {
            width: 100%;
            height: 40px;
            color: #fff;
            display: flex;
            line-height: 40px;
            padding-left: 10px;
            cursor: pointer;
            background: #409EFF;
            span {
                flex: 1;
                text-align: center;
            }
        }
        .f-cation_info {
            width: 100%;
            flex: 1;
            height: 100%;
            flex-direction: column;
            overflow: auto;
            display: block;
            -webkit-padding-start: 0px;
            .info-item {
                width: 100%;
                height: 40px;
                display: flex;
                line-height: 40px;
                border-bottom: 1px solid #e5e5e5;
				cursor: pointer;	
                .info-item_div {
                    flex: 1;
                    display: flex;
                    justify-content: flex-end;
                    align-items: flex-end;
                    >span {
                        cursor: pointer;
                    }
                    .text-s {
                        color: #409EFF;
                        margin: 0 10px;
                    }
                }
                i {
                    margin-top: 10px;
                    margin-right: 5px;
                }
            }
			.current{
				background: #f0f0f0;
			}
        }
		.text-not{
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: center;
			color: #666;
		}
    }
</style>
<template>
    <div class="f-cation">
        <p class="f-cation_btn">
            <font @click="addCartFn">新增+</font>
            <span>一级分类</span>
        </p>
        <el-input placeholder="请输入内容" prefix-icon="el-icon-search" clearable v-model="keyWord"></el-input>
        <ul class="f-cation_info" v-if="list && list.length>0">
            <li class="info-item" v-for="(item, index) in list" :class="{'current': currentIndex == index}" @click="selectItem(item, index)">
                <span>{{item.catName}}</span>
                <div class="info-item_div">
                    <span class="text-s text-14" @click="editFn(item)">编辑</span>
                    <span class="text-red text-14" @click="deleteFn(item)">删除</span>
                </div>
                <i class="el-icon-arrow-right"></i>
            </li>
        </ul>
		<div v-else class="text-not">暂无数据</div>
        <el-dialog title="新建二级分类" :visible.sync="centerDialogVisible" width="30%" center>
            <el-row class="p-all-20 ">
                <el-col :span="20" class="box-flex m-b-10">
                    <el-input type="请输入一级品类名称" v-model="leaveName" />
                </el-col>

            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveAdmin">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
	import { SUCCESS_REQUEST_STATUS } from '@/utils/config.js'
    export default {
        props: {
			firstId: {
				type: String,
				default: ''
			},
            leveSecondList: {
                type: Array,
                default: []
            }
        },
        data() {
            return {
                list: [],
				leaveName: '',
				catId: '',
				parentId: '',
				currentIndex: 0,
				keyWord: '',
				centerDialogVisible: false
            }
        },
        methods: {
			selectItem(item, index) {
				this.currentIndex = index
				this.$emit('selectSecondItem',item.catId)
			},
			editFn(item) {
				this.catId = item.catId
				this.leaveName = item.catName
				this.centerDialogVisible = true
			},
            addCartFn() {
                this.catId = ''
                this.centerDialogVisible = true
            },
			deleteFn(item) {
				this.$confirm("删除二级品类?", "确定删除此品类", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					this.$ajax({
						api: 'category/delete',
						params: {
							catId: item.catId
						}
					}).then(res => {
						if(res.status === SUCCESS_REQUEST_STATUS) {
							this.$emit('addSLeave')
							this.$message({
								type: 'success',
								message: '删除成功'
							})
						}
					}).catch(err => {
						this.$message({
							type: 'error',
							message: err.message
						})
					})
				})
			},
			saveAdmin() {
				this.$ajax({
					api: 'category/add',
					params: {
						catId: this.catId,
						parentId: this.firstId,
						catName: this.leaveName,
						levelNum: 2
					}
				}).then(res => {
					if(res.status === SUCCESS_REQUEST_STATUS) {
						this.$emit('addSLeave')
						this.$message({
							type: 'success',
							message: '操作成功'
						})
						this.centerDialogVisible = false
					}
				}).catch(err => {
					this.$message({
						type: 'error',
						message: err.message
					})
				})
			}
        },
        created() {
            this.list = this.leveSecondList
        },
		watch: {
			leveSecondList(val) {
				this.list = val
			},
			keyWord(val) {
				this.$emit('searchSecond' ,val)
			}
		}
    }
</script>
